<template>
	<view>
		
		<form class="flowform" @reset="reset">
			<!-- 参考网站 https://blog.csdn.net/YY_ain/article/details/123391460 -->
			<template>
			    <view>
			        <view class="wrap">
			            <view class="u-tabs-box">
			                <u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750" ></u-tabs-swiper>
			            </view>
						
			            <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: calc(100vh - 15vh)">
			                
							<swiper-item class="swiper-item">
							    <scroll-view scroll-y style="height: 100%;width: 100%;"   >
							    <!-- <view >代发货</view> -->
								<view class="jn-grid-list margin-top-20" >
									<view class="jn-staff-list-cell">
										<uni-swipe-action>
											<uni-swipe-action-item v-for="(item,index) in staffs0"  :key="index" >
												<u-card :title="item.F_Name"   >
													<template v-slot:body>
														<video
															 :src="item.F_Level3"
															 controls
															 width="100%"
															 height="100%" >
														</video>
													</template>
													<template v-slot:foot>
														<view class="u-body-item-title u-line-2">{{item.F_Time}}</view>
													</template>
												</u-card>
											</uni-swipe-action-item>
										</uni-swipe-action>
									</view>
								</view>
							           
							    </scroll-view>
							</swiper-item>
							
							<swiper-item class="swiper-item" >
			                    <scroll-view scroll-y style="height: 100%;width: 100%;">
			                    
								<view class="jn-grid-list margin-top-20" >
									<view class="jn-staff-list-cell">
										<uni-swipe-action>
											<uni-swipe-action-item v-for="(item,index) in staffs1"  :key="index" @click="removeDetils(item,index)">
												<!-- <view class="item" @click.stop="staffflow(item)"> -->
													<u-card :title="item.F_Name"  :thumb="item.F_Logo" >
														<template v-slot:body>
															<view >
																<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
																	<view class="u-body-item-title u-line-2">{{item.F_Level1}}</view>
																</view>
															</view>
															<view >
																<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
																	<view class="u-body-item-title u-line-2">{{item.F_Level2}}</view>
																</view>
															</view>
														   <view >
														   	<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
														   		<view class="u-body-item-title u-line-2">{{item.F_Level3}}</view>
														   	</view>
														   </view>
														   <view >
														   	<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
														   		<view class="u-body-item-title u-line-2">{{item.F_Level4}}</view>
														   	</view>
														   </view>
														   <view >
														   	<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
														   		<view class="u-body-item-title u-line-2">{{item.F_Level5}}</view>
														   	</view>
														   </view>
														</template>
														<template v-slot:foot>
															<view class="u-body-item-title u-line-2">{{item.F_Time}} {{item.F_Msg}}</view>
														</template>
													</u-card>
																										
												<!-- </view> -->
											</uni-swipe-action-item>
										</uni-swipe-action>
									</view>
								</view>
			                 
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;"   >
			                    <!-- <view >代发货</view> -->
								<view class="jn-grid-list margin-top-20" >
									<view class="jn-staff-list-cell">
										<uni-swipe-action>
											<uni-swipe-action-item v-for="(item,index) in staffs2"  :key="index" >
												<u-card :title="item.F_Name"  :thumb="item.F_Logo" >
													<template v-slot:body>
														<view >
															<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
																<view class="u-body-item-title u-line-2">{{item.F_Level1}}</view>
															</view>
														</view>
														<view >
															<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
																<view class="u-body-item-title u-line-2">{{item.F_Level2}}</view>
															</view>
														</view>
													   <view >
													   	<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
													   		<view class="u-body-item-title u-line-2">{{item.F_Level3}}</view>
													   	</view>
													   </view>
													</template>
													<template v-slot:foot>
														<view class="u-body-item-title u-line-2">{{item.F_Time}} {{item.F_Msg}}</view>
													</template>
												</u-card>
											</uni-swipe-action-item>
										</uni-swipe-action>
									</view>
								</view>
			                           
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;">
			                    <!-- <view >待收货</view> -->
			                    <view class="jn-grid-list margin-top-20" >
			                    	<view class="jn-staff-list-cell">
			                    		<uni-swipe-action>
			                    			<uni-swipe-action-item v-for="(item,index) in staffs3"  :key="index" >
			                    				<u-card :title="item.F_Name"  :thumb="item.F_Logo" >
			                    					<template v-slot:body>
			                    						<view >
			                    							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                    								<view class="u-body-item-title u-line-2">{{item.F_Level1}}</view>
			                    							</view>
			                    						</view>
			                    						<view >
			                    							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                    								<view class="u-body-item-title u-line-2">{{item.F_Level2}}</view>
			                    							</view>
			                    						</view>
			                    					   <view >
			                    					   	<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                    					   		<view class="u-body-item-title u-line-2">{{item.F_Level3}}</view>
			                    					   	</view>
			                    					   </view>
			                    					</template>
			                    					<template v-slot:foot>
			                    						<view class="u-body-item-title u-line-2">{{item.F_Time}} {{item.F_Msg}}</view>
			                    					</template>
			                    				</u-card>
			                    			</uni-swipe-action-item>
			                    		</uni-swipe-action>
			                    	</view>
			                    </view>            
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;"   >
			                     <!-- <view >待评价</view> -->
			                     <view class="jn-grid-list margin-top-20" >
			                     	<view class="jn-staff-list-cell">
			                     		<uni-swipe-action>
			                     			<uni-swipe-action-item v-for="(item,index) in staffs4"  :key="index" >
			                     				<u-card :title="item.F_Name"  :thumb="item.F_Logo" >
			                     					<template v-slot:body>
			                     						<view >
			                     							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                     								<view class="u-body-item-title u-line-2">{{item.F_Level1}}</view>
			                     							</view>
			                     						</view>
			                     						<view >
			                     							<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                     								<view class="u-body-item-title u-line-2">{{item.F_Level2}}</view>
			                     							</view>
			                     						</view>
			                     					   <view >
			                     					   	<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
			                     					   		<view class="u-body-item-title u-line-2">{{item.F_Level3}}</view>
			                     					   	</view>
			                     					   </view>
			                     					</template>
			                     					<template v-slot:foot>
			                     						<view class="u-body-item-title u-line-2">{{item.F_Time}} {{item.F_Msg}}</view>
			                     					</template>
			                     				</u-card>
			                     			</uni-swipe-action-item>
			                     		</uni-swipe-action>
			                     	</view>
			                     </view> 
			                    </scroll-view>
			                </swiper-item>
							
			            </swiper>
			        </view>
			    </view>
			</template>	
			
			<!-- <view class="buttom-box">
				<view class="flow-button">
					<button class="btn-same btn-keep"   @tap="submit">返回</button>
					<button class="btn-same btn-submit" @tap="submit">保存</button>
				</view>
			</view> -->
		</form>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
		
		<!-- 日历 -->
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	
	export default {
		components: {
		},
		data() {
			return {
				list: [
					{
						name: '视频监控',
						//count: 5
					},
					{
						name: '健康守护',
						count: 5
					},
					{
						name: '一键报警',
						count: 3
					},
					{
						name: '距离报警',
						count: 4
					},
					{
						name: '设备离线',
						count: 2
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				
				show: false,
				mode: 'date',
				datevalue: this.getdate(),
				
				staffList0: [],				
				staffList1: [],
				staffList2: [],
				staffList3: [],
				staffList4: [],
				
				multiple: false, //多选
				selectParent: false, //父级可选
				
				type: 'textarea',
				border: false,
				height: 100,
				autoHeight: true,
				staff: {
					billno:'K241130001',
					billcredate:'2025-01-06',
					billtime:'09:00~10:30',
					workingNature:'奉化学楼101',
					fullName: '宋江',
					node: '有机化学实验操作课',
					idNumber: '',
				},
				mode: '',
				isSearchShow:false,
				pickerList: [],
				isId:false,
				listId:''
			}
		},
		onLoad(e) {
			this.isId = Object.prototype.hasOwnProperty.call(e, 'id');
			this.listId = e.id;
			
			this.init();
		},
		computed: {
			//预约工位内容
			staffs0: function() {
				let search = this.search;
				let staffList = this.staffList0;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约工位内容
			staffs1: function() {
				let search = this.search;
				let staffList = this.staffList1;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约设备内容
			staffs2: function() {
				let search = this.search;
				let staffList = this.staffList2;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约危化品内容
			staffs3: function() {
				let search = this.search;
				let staffList = this.staffList3;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约耗材内容
			staffs4: function() {
				let search = this.search;
				let staffList = this.staffList4;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			}
		},
		onReady(){
					uni.getSystemInfo({
						success: (res) => {
							let topHeight = 100;
							let winHeight = (res.windowHeight * (750/res.windowWidth));
							// boxHeight为屏幕高度 - 顶部高度
							this.boxHeight = winHeight - topHeight + 'rpx';
						}
					});
				},
		methods: {
			staffflow(item) {
				console.log('staffflow')
				uni.navigateTo({
					url: './form?id=' + item.F_Name
				})
			},
			creqateopen() {
				uni.navigateTo({
					url: './form'
				});
			},
			
			
			removeDetils(item, index) {
				console.log('removeDetils')
			},
			
			getdate(){
			   //返回当前日期
			   let date = new Date();
			   let formattedDate = date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }); // 输出格式如 "2023-01-01"
			   console.log(formattedDate);
			   return formattedDate;
			},
			init() {
				var res={
					"data": {
						"code": 200,
						"msg": "Success",
						"data": {
							"list0": [
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:23:56",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "http://180.166.193.6:90/images/study/aa3afda4f74eea549b6a14c7bff399d3.mp4",
									"level4": "",
									"level5": "",
									"fullName": "诸葛亮",
									"msg":"一键呼叫老师"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student2.png",
									"time": "10:25:01",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "http://180.166.193.6:90/images/study/85d7c30cbdd8a5b442791dea287856c6.mp4",
									"level4": "",
									"level5": "",
									"fullName": "孔子",
									"msg":"一键呼叫老师"
								}
							  ],
							"list1": [
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:23:56",
									"level1": "血压:130~90",
									"level2": "心率:78",
									"level3": "血氧:96%",
									"level4": "体温:37°C",
									"level5": "步数:5863",
									"fullName": "刘阿斗",
									"msg":"运动小达人"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student2.png",
									"time": "10:25:01",
									"level1": "血压:130~90",
									"level2": "心率:78",
									"level3": "血氧:96%",
									"level4": "体温:37°C",
									"level5": "步数:5863",
									"fullName": "小乔",
									"msg":"运动小达人"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:28:18",
									"level1": "血压:130~90",
									"level2": "心率:78",
									"level3": "血氧:96%",
									"level4": "体温:37°C",
									"level5": "步数:5863",
									"fullName": "关平",
									"msg":"运动小达人"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:23:56",
									"level1": "血压:130~90",
									"level2": "心率:78",
									"level3": "血氧:96%",
									"level4": "体温:37°C",
									"level5": "步数:5863",
									"fullName": "张苞",
									"msg":"运动小达人"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student2.png",
									"time": "10:23:56",
									"level1": "血压:130~90",
									"level2": "心率:78",
									"level3": "血氧:96%",
									"level4": "体温:37°C",
									"level5": "步数:5863",
									"fullName": "曹丕",
									"msg":"运动小达人"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student2.png",
									"time": "10:23:56",
									"level1": "血压:130~90",
									"level2": "心率:78",
									"level3": "血氧:96%",
									"level4": "体温:37°C",
									"level5": "步数:5863",
									"fullName": "貂蝉",
									"msg":"运动小达人"
								}
							  ],
							"list2": [
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:23:56",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "上报地点:上海博物馆",
									"level4": "",
									"level5": "",
									"fullName": "刘阿斗",
									"msg":"一键呼叫老师"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student2.png",
									"time": "10:25:01",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "上报地点:上海博物馆",
									"level4": "",
									"level5": "",
									"fullName": "小乔",
									"msg":"一键呼叫老师"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:28:18",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "上报地点:上海博物馆",
									"level4": "",
									"level5": "",
									"fullName": "关平",
									"msg":"一键呼叫老师"
								}
							  ],
							"list3": [
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:23:56",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "上报地点:上海博物馆",
									"level4": "",
									"level5": "",
									"fullName": "刘阿斗",
									"msg":"超出安全距离"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student2.png",
									"time": "10:25:01",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "上报地点:上海博物馆",
									"level4": "",
									"level5": "",
									"fullName": "小乔",
									"msg":"超出安全距离"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:28:18",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "上报地点:上海博物馆",
									"level4": "",
									"level5": "",
									"fullName": "关平",
									"msg":"超出安全距离"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:28:18",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "上报地点:上海博物馆",
									"level4": "",
									"level5": "",
									"fullName": "曹植",
									"msg":"超出安全距离"
								}
							  ],
							"list4": [
								{
									"logo": "http://180.166.193.6:90/images/study/student.png",
									"time": "10:23:56",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "上报地点:上海博物馆",
									"level4": "",
									"level5": "",
									"fullName": "刘阿斗",
									"msg":"设备离线"
								},
								{
									"logo": "http://180.166.193.6:90/images/study/student2.png",
									"time": "10:25:01",
									"level1": "经度:121.47004",
									"level2": "纬度:31.23136",
									"level3": "上报地点:上海博物馆",
									"level4": "",
									"level5": "",
									"fullName": "小乔",
									"msg":"设备离线"
								}
							  ],
							"pagination": {
								"currentPage": 1,
								"pageSize": 10,
								"total": 635
							}
						}
					},
					"statusCode": 200,
					"errMsg": "request:ok",
					"cookies": []
				}
				
				let staff0 = res.data.data.list0;
				this.staffList0=[];
				for (let i = 0; i < staff0.length; i++) {
					this.staffList0.push({
						'F_Logo'  : staff0[i].logo,
						'F_Time'  : staff0[i].time,
						'F_Name'  : staff0[i].fullName,
						'F_Msg'   : staff0[i].msg,
						'F_Level1': staff0[i].level1,
						'F_Level2': staff0[i].level2,
						'F_Level3': staff0[i].level3,
						'F_Level4': staff0[i].level4,
						'F_Level5': staff0[i].level5
					})
				}
				
				let staff1 = res.data.data.list1;
				this.staffList1=[];
				for (let i = 0; i < staff1.length; i++) {
					this.staffList1.push({
						'F_Logo'  : staff1[i].logo,
						'F_Time'  : staff1[i].time,
						'F_Name'  : staff1[i].fullName,
						'F_Msg'   : staff1[i].msg,
						'F_Level1': staff1[i].level1,
						'F_Level2': staff1[i].level2,
						'F_Level3': staff1[i].level3,
						'F_Level4': staff1[i].level4,
						'F_Level5': staff1[i].level5
					})
				}
				
				let staff2 = res.data.data.list2;
				this.staffList2=[];
				for (let i = 0; i < staff2.length; i++) {
					this.staffList2.push({
						'F_Logo'  : staff2[i].logo,
						'F_Time'  : staff2[i].time,
						'F_Name'  : staff2[i].fullName,
						'F_Msg'   : staff2[i].msg,
						'F_Level1': staff2[i].level1,
						'F_Level2': staff2[i].level2,
						'F_Level3': staff2[i].level3,
						'F_Level4': staff2[i].level4,
						'F_Level5': staff2[i].level5
					})
				}
				
				let staff3 = res.data.data.list3;
				this.staffList3=[];
				for (let i = 0; i < staff3.length; i++) {
					this.staffList3.push({
						'F_Logo'  : staff3[i].logo,
						'F_Time'  : staff3[i].time,
						'F_Name'  : staff3[i].fullName,
						'F_Msg'   : staff3[i].msg,
						'F_Level1': staff3[i].level1,
						'F_Level2': staff3[i].level2,
						'F_Level3': staff3[i].level3,
						'F_Level4': staff3[i].level4,
						'F_Level5': staff3[i].level5
					})
				}
				
				let staff4 = res.data.data.list4;
				this.staffList4=[];
				for (let i = 0; i < staff4.length; i++) {
					this.staffList4.push({
						'F_Logo'  : staff4[i].logo,
						'F_Time'  : staff4[i].time,
						'F_Name'  : staff4[i].fullName,
						'F_Msg'   : staff4[i].msg,
						'F_Level1': staff4[i].level1,
						'F_Level2': staff4[i].level2,
						'F_Level3': staff4[i].level3,
						'F_Level4': staff4[i].level4,
						'F_Level5': staff4[i].level5
					})
				}
				
			},
			
			open() {
				    console.log('消息提示');
			        uni.showToast({
			        	title: '新增弹窗',
			        	duration: 2000
			        });
			      },
				  
			
			submit() {
				//console.log('返回上一页成功');
				// 在某个事件或条件下触发返回上一页操作
				uni.navigateBack({
				    delta: 1, // 返回的页面数，如果是1表示返回上一级页面，可以根据需求调整
				    success: function() {
				        console.log('返回上一页成功');
				    },
				    fail: function(error) {
				        console.error('返回上一页失败', error);
				    }
				});

			},
			reset(e) {
				//console.log('清空数据')
			},
			
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}
</style>
